<template>
	<view>
		<view class="bg-box">
			<view class="u-text-center u-border-bottom u-p-b-60 u-p-t-30">
				<view class="u-m-t-20 u-m-b-20"><text class="font-white">可用余额（元）</text></view>
				<view>
					<text class="u-font-24 font-white">￥</text>
					<text class="balance bold u-font-60 font-white">{{utils.formatMoney(balance)}}</text>
				</view>
				<view>
					
				</view>
			</view>
		</view>
		
		<view>
			<list-filter-panel @filter-change="filterChange"></list-filter-panel>
			<view v-if="balanceRecord.length > 0">
				<view class="grid-box">
					<u-cell-group>
						<u-cell-item v-for="(item,index) in balanceRecord" :key="index" :arrow="false">
							<view slot="title">
								<view><text class="u-font-32">{{item.number}}</text></view>
								<view><text class="u-font-24">经手人：{{item.createusername}}</text></view>
								<view><text class="u-font-24 u-tips-color">{{item.createddatetime}}</text></view>
							</view>
							<!-- 变动类型 -->
							<view><text class="u-font-28">{{item.type}}</text></view>
							<!-- 余额增减记录 -->
							<view>
								<text v-if="item.type == '运营商充值' || item.type == '加盟商充值' || item.type == '取消订单'" class="u-main-color u-font-32 color-success">+{{utils.formatMoney(item.amount)}}</text>
								<text v-else-if="item.type == '回收支出'" class="u-main-color u-font-32 color-danger">-{{utils.formatMoney(item.amount)}}</text>
								<text v-else class="u-main-color u-font-32 color-danger">{{utils.formatMoney(item.amount)}}</text>
							</view>
							<!-- 剩余余额 -->
							<view><text>余额：{{item.balance}}</text></view>
						</u-cell-item>
					</u-cell-group>
				</view>
				<view class="u-p-t-30">
					<u-loadmore :status="loadStatus"></u-loadmore>
				</view>
			</view>
			<view v-else class="nomore u-p-t-80 u-p-b-40">
				<u-empty text="您还没有相关的余额明细" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				balance: 0,
				loadStatus: 'nomore',
				pageIndex: 1,
				pageSize: 20,
				key: '',
				// 时间类型
				timeType: 0, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
				startDate: '', //开始时间
				endDate: '', //结束时间
				balanceRecord: []
			}
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				franchiseId: state => state.franchiseId,
				operatorid: state => state.operatorid
			}),
			// 是否运营商管理员
			isOperatorAdmin(){
				return this.userdetail.bindinfo.operator.ismanager
			}
		},
		onLoad() {
			this.getBalanceList()
			this.franchiseDetails()
		},
		onPullDownRefresh() {
			this.balanceRecord = []
			this.pageIndex = 1
			this.getBalanceList(true).then(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		onReachBottom(e) {
			this.reachBottom()
		},
		methods: {
			filterChange(obj){
				console.log('filterChange',obj)
				for(let key in obj){
					this.$set(this,key,obj[key])
				}
				this.getBalanceList(true);
			},
			// 获取余额列表
			getBalanceList(reload = false){
				this.loadStatus = 'loading'
				if (reload) {
					this.pageIndex = 1
					this.balanceRecord = []
				}
				return this.$u.post('/Operator/Balance/List',{
					PageIndex: this.pageIndex,
					PageSize: this.pageSize,
					Key: this.key,
					timeType: this.timeType, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
					startDate: this.startDate, //开始时间
					endDate: this.endDate, //结束时间
				}).then((res)=>{
					// this.balance = res.rows
					if (reload) {
						this.balanceRecord = res.rows
						if (this.balanceRecord.length < this.PageSize) {
							this.loadStatus = 'nomore'
						}
					} else {
						if (res.rows.length > 0) {
							res.rows.forEach((item) => {
								this.balanceRecord.push(item)
							})
							if (res.rows.length < this.PageSize) {
								this.loadStatus = 'nomore'
							} else {
								this.loadStatus = 'loadmore'
							}
						} else {
							this.loadStatus = 'nomore'
						}
					}
				})
			},
			reachBottom() {
				this.pageIndex += 1
				this.getBalanceList(false)
			},
			operatorDetails(){
				return this.$u.get('/Operator/Detail?id='+this.operatorid).then((res)=>{
					console.log('operatorDetails',res)
					this.balance = res.balance
				})
			},
			franchiseDetails(){
				return this.$u.get('/Franchise/Detail?id='+this.franchiseId).then((res)=>{
					console.log('franchiseDetails',res)
					if(res.enablebalance){
						this.balance = res.balance
					}else{
						this.operatorDetails()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.font-white{
		color: #fff;
	}
	.bg-box{
		background-color: #10beca;
		width: 750rpx;
	}
	.grid-box{
		margin: 0;
		padding: 0;
		// margin-top: -140rpx;
		
		.balance{
			// color: $u-color-gray-dark;
			// font-size: 60rpx;
			// font-weight: bold;
		}
	}
</style>
